<!-- <script setup>
import { getToken } from '@/utils/auth';
import { useRequest } from '@/hooks/requestHooks.js';
import { useGlobalState } from '@/store/globalState.js';
import { useWatch } from '@/hooks/useWatch.js';
import { provinceList, citysList } from '@/api/xmgl.js';
const editParams = reactive({
  userName: '',
  buildingCode: '',
  branchType: '',
  province: '',
  city: '',
  county: '',
  textarea: '',
  jd: '',
  wd: '',
  xxdz: '',
});
const editParams2 = ref({
  userName: '',
  buildingCode: '',
});
const props = defineProps({
  data: { type: Array, default: () => [] },
  showOperate: { type: Boolean, default: false },
  showCheckbox: { type: Boolean, default: false },
  addTop: { type: Boolean, default: false },
  showFilter: { type: Boolean, default: false },
});

const countyList = ref([]);
const parentCode = ref('');
const cityCode = ref('');
//获取省数据
const [provinceLists, ,] = useRequest(provinceList, {
  defaultParams: [],
});
const provinceChange = () => {
  provinceLists.value.map(m => {
    if (m.areaName === val) {
      parentCode.value = m.areaCode;
    }
  });
};
//获取县区数据
const [cityList, ,] = useRequest(citysList, {
  defaultParams: [{ parentCode: parentCode.value }],
});
const citysChange = val => {
  cityList.value.map(m => {
    if (m.areaName === val) {
      cityCode.value = m.areaCode;
    }
  });
  useRequest(citysList, {
    defaultParams: [{ parentCode: cityCode.value }],
    onSuccess: data => {
      countyList.value = data.rows;
    },
  });
};
const defaultProps = ref({
  // 默认设置
  children: 'children',
  label: 'label',
});
const currentData = ref({});
const currentNode = ref({});
const NODE_ID_START = ref(0); // 新增节点id，逐次递减
const initParam = ref({
  // 新增参数
  name: '新增节点',
  pid: 0,
  children: [],
});
const dialogData = ref({
  open1: false, //单位
  open2: false, //区域
  title: '',
});
const upload = ref({
  // 设置上传的请求头部
  headers: { Authorization: 'Bearer ' + getToken() },
  // 上传的地址
  url: useGlobalState().globalState.fileUrl,
});
const tree = ref(null);
const filterText = ref('');
function filterNode(value, data) {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
}
useWatch(filterText, n => {
  tree.value.filter(n);
});
const addChildNode = (node, data) => {
  dialogData.value.open1 = true;
  dialogData.value.title = '添加';
  currentData.value = data;
};
const editNode = (node, data) => {
  dialogData.value.title = '编辑';
  if (node.level === 1) {
    dialogData.value.open1 = true;
  } else {
    dialogData.value.open2 = true;
  }
};
const removeNode = (node, data) => {
  const parent = node.parent;
  const children = parent.data.children || parent.data;
  const index = children.findIndex(d => d.id === data.id);
  children.splice(index, 1);
};
const submitForm = val => {
  let id = Math.ceil(Math.random() * 100);
  if (val === 1) {
    const newChild = { id: id, label: 'testtest', children: [] };
    if (!currentData.value.children) {
      currentData.value.children = [];
      // this.$set(data, 'children', []);
      // Reflect.set(props.data, 'children', []);
    }
    currentData.value.children.push(newChild);
    // props.data.children.push(newChild);
  }
};
const cancel = () => {};
</script> -->
<script>
import { merge, pick, cloneDeep, forEach } from 'lodash-es';
import { getToken } from '@/utils/auth';
import {
  provinceList,
  citysList,
  getInfo,
  addBuilding,
  getBranchType,
  editBuilding,
  getEditBuilding,
  deleteBuilding,
  getDownloadPath,
} from '@/api/index.js';
import ToolTip from '@/components/ToolTip/index.vue';
export default {
  components: { ToolTip },
  props: {
    data: { type: Array, default: () => [] },
    defaultData: { type: Array, default: () => null },
    showOperate: { type: Boolean, default: false },
    showCheckbox: { type: Boolean, default: false },
    addTop: { type: Boolean, default: false },
    showFilter: { type: Boolean, default: false },
    qybh: { type: String, default: '' },
    defaultExpand: { type: Boolean, default: true },
    defaultCheckedKeys: { type: Array, default: () => [] },
    szSaveButton: { type: Boolean, default: false },
  },
  data() {
    return {
      loading: false,
      defaultProps: {
        // 默认设置
        children: 'children',
        label: 'name',
      },
      initParam: {
        // 新增参数
        name: '新增节点',
        pid: 0,
        children: [],
      },
      currentData: '',
      currentNode: '',
      filterText: '',
      dialogData: {
        open1: false, //机构
        open2: false, //区域
        title: '',
      },
      editParams: {
        buildingName: '',
        buildingCode: '',
        branchType: '',
        buildingImage: '',
        areaCity: '',
        areaCounty: '',
        lat: '',
        lon: '',
        areaAddress: '',
        buildingViewId: '',
        buildingArea: '',
        introduce: '',
        gaugesList: [], //总表
      },
      provinceList: [],
      cityList: [],
      countyList: [],
      parentCode: '',
      cityCode: '',
      upload: {
        headers: { Authorization: 'Bearer ' + getToken() }, // 设置上传的请求头部
        url: this.$store.state.global.serverUrl + '/file/uploadFile', // 上传的地址
      },
      fileLists: [],
      countyList: '',
      parentCode: '',
      cityCode: '',
      dwlxLists: [],
      currentCode: '',
      disabled: false,
      buildingImage: null,
      AccountList: [
        {
          label: '电表计户号：',
          gaugesType: 'ELECTRICITY',
          list: [{ name: '总户号', num: '' }],
        },
        {
          label: '水表计户号：',
          gaugesType: 'WATER',
          list: [{ name: '总户号', num: '' }],
        },
        {
          label: '气表计户号：',
          gaugesType: 'AIR',
          list: [{ name: '总户号', num: '' }],
        },
        {
          label: '暖表计户号：',
          gaugesType: 'WARM',
          list: [{ name: '总户号', num: '' }],
        },
      ],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    defaultCheckedKeys: {
      handler(n, o) {},
    },
  },
  mounted() {
    if (this.addTop) {
      this.getShengData();
      this.netGetBranchType();
    }
    this.$nextTick(function () {
      // this.$refs.tree.setCurrentKey('1');
    });
  },
  methods: {
    //获取省数据
    getShengData() {
      provinceList().then(res => {
        this.provinceList = res.data;
      });
    },
    provinceChange(val) {
      this.provinceList.map(m => {
        if (m.areaName === val) {
          this.parentCode = m.areaCode;
        }
      });
      this.getCityData();
      this.editParams.areaCity = '';
      this.editParams.areaCounty = '';
    },
    //获取市数据
    getCityData() {
      citysList({
        parentCode: this.parentCode,
      }).then(res => {
        this.cityList = res.rows;
      });
    },
    citysChange(val) {
      this.cityList.map(m => {
        if (m.areaName === val) {
          this.cityCode = m.areaCode;
        }
      });
      this.getCountyData();
      this.editParams.areaCounty = '';
    },
    //获取县区数据
    getCountyData() {
      citysList({
        parentCode: this.cityCode,
      }).then(res => {
        this.countyList = res.rows;
      });
    },
    netAddBuilding(params) {
      if (params.buildingViewId === '') {
        this.$modal.msgError('编号为空');
      } else {
        addBuilding(params).then(res => {
          if (res.code === 200) {
            this.fileLists = [];
            this.buildingImage = null;
            this.disabled = false;
            this.editParams = {
              buildingViewId: '',
              buildingName: '',
              buildingCode: '',
              branchType: '',
              buildingImage: '',
              areaCity: '',
              areaCounty: '',
              areaAddress: '',
              lon: '',
              lat: '',
              buildingArea: '',
              introduce: '',
            };
            this.$modal.msgSuccess(res.msg);
            this.$emit('addBuilding');
            this.dialogData.open1 = false;
            this.dialogData.open2 = false;
          } else {
            this.$modal.msgError(res.msg);
          }
        });
      }
    },
    netGetBranchType() {
      getBranchType().then(res => {
        this.dwlxLists = res.data;
      });
    },
    netEditBuilding(params) {
      editBuilding(params).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess(res.msg);
          this.fileLists = [];
          this.buildingImage = null;
          this.disabled = false;
          this.editParams = {
            buildingName: '',
            buildingCode: '',
            branchType: '',
            buildingImage: '',
            areaCity: '',
            areaCounty: '',
            areaAddress: '',
            lon: '',
            lat: '',
            buildingArea: '',
            introduce: '',
          };
          this.$emit('addBuilding');
          this.dialogData.open1 = false;
          this.dialogData.open2 = false;
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },
    netGetEditBuilding(params) {
      let formdata = new FormData(); //new出来的对象
      formdata.append('buildingCode', params.buildingCode);
      formdata.append('enterpriseCode', params.enterpriseCode);
      getEditBuilding(params).then(res => {
        this.editParams = res?.data;
        if (res?.data?.buildingImage?.length > 0) {
          this.buildingImage = res.data.buildingImage;
          getDownloadPath(res.data.buildingImage).then(res2 => {
            this.fileLists = [
              {
                name: '',
                url: useGlobalState().globalState.fileUrl + res2?.data?.url,
              },
            ];
          });
        }
        let arr = cloneDeep(this.AccountList);
        forEach(res?.data?.gaugesList, el => {
          forEach(arr, item => {
            if (el.gaugesType === item.gaugesType) {
              if (item.list[0].name.length > 0 && item.list[0].num.length > 0) {
                item.list.push({ name: el.gaugesName, num: el.gaugesNum });
              } else {
                item.list[0] = { name: el.gaugesName, num: el.gaugesNum };
              }
            }
          });
        });
        this.editParams.gaugesList = arr;
      });
    },
    netDeleteBuilding(id) {
      deleteBuilding({ buildingCode: id, enterpriseCode: this.qybh }).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess(res.msg);
          this.$emit('addBuilding');
        } else {
          this.$modal.msgError(res.msg);
        }
      });
    },
    handleNodeClick(data, node, e) {
      let parentNode = null;
      let enterpriseCode = null;
      if (node.level > 1) {
        // 获取顶级父节点
        parentNode = this.$refs.tree.getNode(node.parent);
        enterpriseCode = parentNode.data.id;
        if (parentNode.level > 1) {
          parentNode = this.$refs.tree.getNode(parentNode.parent);
          enterpriseCode = parentNode.data.id;
          if (parentNode.level > 1) {
            parentNode = this.$refs.tree.getNode(parentNode.parent);
            enterpriseCode = parentNode.data.id;
          }
        }
      }
      // 输出顶级父节点
      this.$emit('handleNodeClick', {
        enterpriseCode: !enterpriseCode ? data.id : enterpriseCode,
        buildingCode: node.level === 1 ? '' : data.id,
      });
    },
    handleCheckChange(data, checked, indeterminate) {
      const str = this.$refs.tree.getCheckedKeys() + '';
      this.$emit('handleCheckChange', str);
    },
    addTopNode() {
      this.dialogData.title = '添加';
      this.dialogData.open1 = true;
      this.editParams.gaugesList = cloneDeep(this.AccountList);
    },
    addChildNode(node, data) {
      this.dialogData.title = '添加';
      this.dialogData.open2 = true;
      this.currentData = data;
      this.currentNode = node;
    },
    editNode(node, data) {
      this.disabled = true;
      this.dialogData.title = '编辑';
      this.netGetEditBuilding({ buildingCode: data.id, enterpriseCode: this.qybh });
      this.currentData = data;
      this.currentNode = node;
      if (node.level === 1) {
        this.dialogData.open1 = true;
      } else {
        this.dialogData.open2 = true;
      }
    },
    removeNode(node, data) {
      this.$confirm(`确定删除'${data.name}'节点?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.netDeleteBuilding(data.id);
        })
        .catch(() => {});
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleExceed() {
      this.$modal.msgError('当前限制最大上传数量：1 ,上传新的文件之前请先删除原文件！');
    },
    beforeAvatarUpload(file) {
      let types = ['image/gif', 'image/jpg', 'image/png', 'image/jpeg'];
      const isImage = types.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isImage) {
        this.$message.error('上传头像图片只能是 JPG、GIF、PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isImage && isLt2M;
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.buildingImage = response.data.url;
        this.editParams.buildingImage = response.data.url;
        if (this.dialogData.open1) {
          this.$refs.editForm.validateField('buildingImage');
        }
      } else {
        this.$modal.msgError(response.msg);
        this.fileLists = [];
      }
    },
    handleRemove() {
      this.buildingImage = '';
      this.editParams.buildingImage = '';
      this.$refs.editForm.validateField('buildingImage');
    },
    addMeter(index) {
      this.editParams.gaugesList[index].list.push({ name: '', num: '' });
    },
    deleteMeter(typeInd, itemInd) {
      this.editParams.gaugesList[typeInd].list.splice(itemInd, 1);
    },
    editInput(e, typeInd, itemInd, editItem) {
      this.editParams.gaugesList[typeInd].list[itemInd][editItem] = e.target.value;
    },
    convertData(data) {
      let arr = [];
      forEach(data, el => {
        forEach(el.list, n => {
          let obj = {
            gaugesType: el.gaugesType,
            gaugesName: n.name,
            gaugesNum: n.num,
          };
          arr.push(obj);
        });
      });
      return arr;
    },
    submitForm(text, val) {
      let params = merge({}, val, {
        enterpriseCode: this.qybh,
        buildingImage: this.buildingImage,
        pBuildingCode: null,
        level: null,
        gaugesList: null,
      });
      if (text === '机构') {
        this.$refs.editForm.validate(valid => {
          if (valid) {
            params.pBuildingCode = '0';
            let data = this.convertData(this.editParams.gaugesList);
            params.gaugesList = data;
            if (this.dialogData.title === '添加') {
              params.level = '1';
              this.netAddBuilding(params);
            } else {
              this.netEditBuilding(params);
            }
            this.resetForm('editParams');
          }
        });
      } else {
        this.$refs.editParams2.validate(valid => {
          if (valid) {
            params = pick(params, [
              'enterpriseCode',
              'buildingImage',
              'buildingName',
              'pBuildingCode',
              'level',
              'buildingCode',
              'buildingViewId',
              'buildingArea',
            ]);
            if (this.dialogData.title === '添加') {
              params.pBuildingCode = this.currentData.id;
              params.level = this.currentNode.level + 1;
              this.netAddBuilding(params);
            } else {
              // params.pBuildingCode = this.currentData.id;
              this.netEditBuilding(params);
            }
          } else {
            return false;
          }
        });
      }
    },
    cancel() {
      this.dialogData.open1 = false;
      this.dialogData.open2 = false;
      this.editParams = {
        buildingName: '',
        buildingCode: '',
        branchType: '',
        buildingImage: '',
        areaCity: '',
        areaCounty: '',
        areaAddress: '',
        lon: '',
        lat: '',
        buildingArea: '',
        introduce: '',
        gaugesList: [],
      };
      this.fileLists = [];
      this.resetForm('editParams');
      this.disabled = false;
      this.buildingImage = null;
    },
  },
};
</script>
<template>
  <div class="et-box u-p20">
    <el-button v-if="addTop" type="primary" plain size="small" style="margin-bottom: 20px" @click="addTopNode()">
      添加顶级节点
    </el-button>
    <el-input
      class="u-mb20"
      prefix-icon="el-icon-search"
      size="small"
      v-if="showFilter"
      placeholder="查询"
      v-model="filterText"
    ></el-input>
    <el-tree
      ref="tree"
      v-loading="loading"
      :data="defaultData ?? data"
      node-key="id"
      :props="defaultProps"
      :default-expand-all="defaultExpand"
      :default-checked-keys="defaultCheckedKeys"
      :expand-on-click-node="false"
      :show-checkbox="showCheckbox"
      :filter-node-method="filterNode"
      :check-strictly="true"
      @node-click="handleNodeClick"
      @check-change="handleCheckChange"
      :highlight-current="true"
    >
      <span class="custom-tree-node u-fs14" slot-scope="{ node, data }">
        <ToolTip class="tree-lable u-pr20" :content="data.name" effect="dark" />
        <!-- <span class="tree-lable u-pr20">{{ data.name }}</span> -->
        <span v-if="showOperate" class="u-sec-text">
          <i class="toolBtn el-icon-plus u-mr5" @click="addChildNode(node, data)"></i>
          <i class="toolBtn el-icon-edit-outline u-mr5" @click="() => editNode(node, data)"></i>
          <i class="toolBtn el-icon-delete u-mr5" @click="removeNode(node, data)"></i>
        </span>
      </span>
    </el-tree>
    <el-dialog :visible.sync="dialogData.open1" width="50%" :before-close="cancel" append-to-body>
      <div slot="title" class="dialog-title">
        <span class="tit">
          {{ dialogData.title }}-
          <span class="u-prim-text">机构</span>
        </span>
      </div>
      <el-form :model="editParams" ref="editForm" size="small" label-width="100px" class="editForm" :inline="true">
        <el-form-item
          label="机构名称："
          prop="buildingName"
          :rules="{ required: true, message: '请输入机构名称', trigger: 'blur' }"
        >
          <el-input
            v-filter-input
            style="width: 180px"
            v-model.trim="editParams.buildingName"
            placeholder="请输入机构名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item
          label="机构编号："
          prop="buildingViewId"
          :rules="{ required: true, message: '请输入机构编号', trigger: 'blur' }"
        >
          <el-input
            v-filter-input
            style="width: 180px"
            v-model.trim="editParams.buildingViewId"
            placeholder="请输入机构编号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="机构类型：">
          <el-select
            class="el-input_search"
            v-model="editParams.branchType"
            placeholder="请选择机构类型"
            clearable
            size="small"
            style="width: 170px !important"
          >
            <el-option v-for="dict in dwlxLists" :key="dict.code" :label="dict.name" :value="dict.code" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="建筑面积："
          prop="buildingArea"
          :rules="{ required: true, message: '请输入单位建筑面积', trigger: 'blur' }"
        >
          <el-input
            v-filter-input
            style="width: 180px"
            v-model.trim="editParams.buildingArea"
            placeholder="请输入单位建筑面积"
            clearable
            size="small"
          />
        </el-form-item>
        <br />
        <el-form-item
          label="机构图片："
          prop="buildingImage"
          :rules="{ required: true, message: '请上传机构图片', trigger: 'blur' }"
        >
          <el-upload
            :action="upload.url"
            list-type="picture-card"
            :limit="1"
            name="file"
            :show-file-list="true"
            :headers="upload.headers"
            :on-exceed="handleExceed"
            :before-upload="beforeAvatarUpload"
            :file-list="fileLists"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <br />
        <el-form-item
          label="机构介绍："
          prop="introduce"
          :rules="{ required: true, message: '请输入机构介绍', trigger: 'blur' }"
        >
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="editParams.introduce"
            maxlength="200"
            show-word-limit
            clearable
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="机构地址：" :rules="{ required: true, message: '请输入机构地址', trigger: 'blur' }">
          <el-form-item prop="areaProvince" :rules="{ required: true, message: '请选择省', trigger: 'change' }">
            <el-select
              class="el-input_search"
              v-model="editParams.areaProvince"
              placeholder="请选择省"
              clearable
              size="small"
              style="width: 130px !important"
              @change="provinceChange"
            >
              <el-option
                v-for="dict in provinceList"
                :key="dict.areaCode"
                :label="dict.areaName"
                :value="dict.areaName"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="areaCity" :rules="{ required: true, message: '请选择市', trigger: 'change' }">
            <el-select
              class="el-input_search"
              v-model="editParams.areaCity"
              placeholder="请选择市"
              clearable
              size="small"
              style="width: 130px !important"
              @change="citysChange"
            >
              <el-option v-for="dict in cityList" :key="dict.areaCode" :label="dict.areaName" :value="dict.areaName" />
            </el-select>
          </el-form-item>
          <el-form-item prop="areaCounty" :rules="{ required: true, message: '请选择县', trigger: 'change' }">
            <el-select
              class="el-input_search"
              v-model="editParams.areaCounty"
              placeholder="请选择县"
              clearable
              size="small"
              style="width: 130px !important"
            >
              <el-option
                v-for="dict in countyList"
                :key="dict.areaCode"
                :label="dict.areaName"
                :value="dict.areaName"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="lon" :rules="{ required: true, message: '请输入经度', trigger: 'blur' }">
            <el-input
              v-filter-input
              oninput="value=value.replace(/[^0-9.]/g,'')"
              style="width: 150px"
              v-model.trim="editParams.lon"
              placeholder="经度"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item prop="lat" :rules="{ required: true, message: '请输入纬度', trigger: 'blur' }">
            <el-input
              v-filter-input
              style="width: 150px"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              v-model.trim="editParams.lat"
              placeholder="纬度"
              clearable
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item prop="areaAddress" :rules="{ required: true, message: '请输入详细地址', trigger: 'blur' }">
            <el-input
              v-filter-input
              style="width: 250px"
              v-model.trim="editParams.areaAddress"
              placeholder="请输入详细地址"
              clearable
              size="small"
            />
          </el-form-item>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item v-for="(account, index) in editParams.gaugesList" :key="index" :label="account.label" prop="">
          <div v-for="(item, ind) in account.list">
            <el-input
              v-filter-input
              style="width: 300px"
              v-model.trim="item.name"
              :placeholder="dialogData.title !== '详情' ? '请输入户号名称' : ''"
              clearable
              size="small"
              class="u-mb10"
              @blur="editInput($event, index, ind, 'name')"
              :disabled="ind < 1"
            />
            <span class="u-ml10 u-mr10">-</span>
            <el-input
              v-filter-input
              style="width: 300px"
              v-model.trim="item.num"
              :placeholder="dialogData.title !== '详情' ? '请输入户号编号' : ''"
              clearable
              size="small"
              class="u-mb10"
              @blur="editInput($event, index, ind, 'num')"
            />
            <i
              v-if="ind <= 0 && dialogData.title !== '详情'"
              class="el-icon-circle-plus-outline u-ml10 cursor"
              style="color: #0ebffe; font-size: 20px"
              @click="addMeter(index)"
            ></i>
            <!-- <i v-else class="el-icon-edit u-ml10 cursor u-fs20"></i> -->
            <i
              v-else-if="ind > 0 && dialogData.title !== '详情'"
              class="el-icon-circle-close u-ml10 cursor u-fs20"
              @click="deleteMeter(index, ind)"
            ></i>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel" type="primary" plain>取 消</el-button>
        <el-button type="primary" size="small" @click="submitForm('机构', editParams)">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogData.open2" width="40%" :before-close="cancel" append-to-body>
      <div slot="title" class="dialog-title">
        <span class="tit">
          {{ dialogData.title }}-
          <span class="u-prim-text">区域</span>
        </span>
      </div>
      <el-form :model="editParams" :inline="true" ref="editParams2" size="small" label-width="100px" class="editForm">
        <el-form-item
          label="区域名称："
          prop="buildingName"
          :rules="{ required: true, message: '请输入区域名称', trigger: 'blur' }"
        >
          <el-input
            v-filter-input
            style="width: 180px"
            v-model.trim="editParams.buildingName"
            placeholder="请输入区域名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item
          label="区域编号："
          prop="buildingViewId"
          :rules="{ required: true, message: '请输入区域编号', trigger: 'blur' }"
        >
          <el-input
            v-filter-input
            style="width: 180px"
            v-model.trim="editParams.buildingViewId"
            placeholder="请输入区域编号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item
          label="建筑面积："
          prop="buildingArea"
          :rules="{ required: true, message: '请输入单位建筑面积', trigger: 'blur' }"
        >
          <el-input
            v-filter-input
            style="width: 180px"
            v-model.trim="editParams.buildingArea"
            placeholder="请输入单位建筑面积"
            clearable
            size="small"
          />
        </el-form-item>
        <br />
        <el-form-item label="区域图片：" prop="buildingImage">
          <el-upload
            :action="upload.url"
            list-type="picture-card"
            :limit="1"
            name="file"
            :show-file-list="true"
            :headers="upload.headers"
            :on-exceed="handleExceed"
            :before-upload="beforeAvatarUpload"
            :file-list="fileLists"
            :on-success="handleAvatarSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel" type="primary" plain>取 消</el-button>
        <el-button type="primary" size="small" @click="submitForm('区域', editParams, 'editForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.et-box {
  height: 100%;
  .el-tree {
    height: calc(100% - 52px);
    overflow-y: auto;
  }
  .custom-tree-node {
    // width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.editForm ::v-deep(.el-textarea__inner) {
  height: 120px;
  width: 750px;
}
.app-dark .editForm ::v-deep(.el-textarea__inner) {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #262f48;
}
</style>
